<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简约折角</title>
    <style>
        body{
            background: #4a4b52;
        }
        .paper{
            width: 500px;
            height: 300px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            /* 设置为0时视觉上不在中间，虽然实际上是在的，缺角影响视觉平衡 */
            bottom: 30px;
            margin: auto;
            /* transparent为透明，100% 0(定位右上角) / 3em 3em(宽高)*/
            /* 实测证明必须用225deg角度，除非矩形为正方形可以用to left bottom */
            background: linear-gradient(to right top,rgba(0,0,0,0.6) 50%,transparent 0) no-repeat 100% 0 / 3em 3em,
            linear-gradient(225deg,transparent 2.1em,#58a 0);
        }
    </style>
</head>
<body>
    <div class="paper"></div>
</body>
</html>
